// pages/addAddress/addAddress.js

import QQMapWX from '../../lib/qqmap-wx-jssdk'
var qqmapsdk;
var qqmapsdk = new QQMapWX({
  key: '开发密钥（key）' // 必填
});

Page({

  /**
   * 页面的初始数据
   */
  data: {
    defaultaddress:true,
    latitude: 0,
    longitude: 0,
    backfill: '',
    detailLocation: '',
  },
  //数据回填方法
backfill: function (e) {
  var id = e.currentTarget.id;
  for (var i = 0; i < this.data.suggestion.length;i++){
    if(i == id){
      this.setData({
        backfill: this.data.suggestion[i].title,
        detailLocation: this.data.suggestion[i].addr,
      });
      // this.__data__.detailLocation = this.data.suggestion[i].address;
      // console.log(this);
      // console.log(this.__data__.detailLocation);
    }  
  }
  this.formSubmit();
},
getsuggest: function(e) {
  var _this = this;
  console.log(e);
  //调用关键词提示接口
  qqmapsdk.getSuggestion({
    //获取输入框值并设置keyword参数
    keyword: e.detail, //用户输入的关键词，可设置固定值,如keyword:'KFC'
    //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
    success: function(res) {//搜索成功后的回调
      console.log(res);
      var sug = [];
      for (var i = 0; i < res.data.length; i++) {
        sug.push({ // 获取返回结果，放到sug数组中
          title: res.data[i].title,
          id: res.data[i].id,
          addr: res.data[i].address,
          city: res.data[i].city,
          district: res.data[i].district,
          latitude: res.data[i].location.lat,
          longitude: res.data[i].location.lng
        });
      }
      _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
        suggestion: sug
      });
    },
    fail: function(error) {
      console.error(error);
    },
    complete: function(res) {
      console.log(res);
    }
  });
},
  onChange() {
    console.log('change');
  },

  onAddressChange() {

  },
  formSubmit(e) {
    var _this = this;
    //调用地址解析接口
    // console.log(123);
    // console.log(this);
    console.log(this.__data__.detailLocation);
    qqmapsdk.geocoder({
      //获取表单传入地址
      address: this.__data__.detailLocation, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
      success: function(res) {//成功后的回调
        console.log(res);
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        //根据地址解析在地图上标记解析地址位置
        _this.setData({ // 获取返回结果，放到markers及poi中，并在地图展示
          markers: [{
            id: 0,
            title: res.title,
            latitude: latitude,
            longitude: longitude,
            iconPath: './resources/placeholder.png',//图标路径
            width: 20,
            height: 20,
            callout: { //可根据需求是否展示经纬度
              content: latitude + ',' + longitude,
              color: '#000',
              display: 'ALWAYS'
            }
          }],
          poi: { //根据自己data数据设置相应的地图中心坐标变量名称
            latitude: latitude,
            longitude: longitude
          }
        });
        _this.setData({
suggestion: '',
      });
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      },

    })
},
  nearby_search:function(){
    var _this = this;
    // 调用接口
    let nowLocation = this.__data__.latitude + ',' + this.__data__.longitude;
    let keyword = this.__data__.backfill;

    qqmapsdk.search({
       keyword: keyword,  //搜索关键词
       location: nowLocation,  //设置周边搜索中心点
       success: function (res) { //搜索成功后的回调
        
         var mks = []
         for (var i = 0; i < res.data.length; i++) {
          //  console.log(123);
           mks.push({ // 获取返回结果，放到mks数组中
             title: res.data[i].title,
             id: res.data[i].id,
             latitude: res.data[i].location.lat,
             longitude: res.data[i].location.lng,
            //  iconPath: "/resources/my_marker.png", //图标路径
             width: 20,
             height: 20
           })
         }
        //  console.log(mks);   
         _this.setData({ //设置markers属性，将搜索结果显示在地图中
           markers: mks
         })

 
       },
       fail: function (res) {
         console.log(res);
       },
       complete: function (res){
         console.log(res);
       }
   });
 },
  selectBuild(){
    wx.navigateTo({
      url: '../selectAddress/selectAddress'
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var _this = this
    wx.getLocation({
      type: 'gcj02',
      isHighAccuracy: true,
      success (res) {
        console.log(res);
        console.log('纬度' + res.latitude)
        console.log('经度' + res.longitude)
        _this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
      },
      fail: (res) => console.log(res)
     })

    qqmapsdk = new QQMapWX({
      key: 'SIBBZ-SSJ6X-2ZL4D-TOOGT-CDXBK-LUBMK'
  });
  
  this.mapCtx = wx.createMapContext('mapId');
  this.mapCtx.on('markerClusterClick', res =>{
    console.log('markerClusterClick', res)
  })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    qqmapsdk.search({
      keyword: '酒店',
      success: function (res) {
          console.log(res);
      },
      fail: function (res) {
          console.log(res);
      },
  complete: function (res) {
      console.log(res);
  }
});
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})